<template>
  <Form
    ref="formRef"
    class="p-2 rounded"
    :model="formState"
    v-bind="getFormProps"
    autocomplete="off"
  >

 
    <Row>
      <template v-for="schema in getSchemas" :key="schema.dataIndex">
        <SchemaFormItem
          :span="getColProps"
          v-bind="schema"
          :form-state="formState"
        />
      </template>
      <Col class="box-border p-2"   v-bind="getActionColProps">
        <a-form-item
          class="m-0 text-right"
          v-if="getSchemaAction"
        >
          <Space>
            <template v-for="action in getSchemaAction.actions">
              <Button v-bind="getActionProps(action)">{{
                action.label
              }}</Button>
            </template>
          </Space>
        </a-form-item>
      </Col>
    </Row>
  </Form>
</template>

<script lang="ts">
import { defineComponent, unref, computed } from 'vue';
import { Form, Row, Col, Button, Space } from 'ant-design-vue';
import SchemaFormItem from './schema-form-item.vue';
import { SchemaFormProps } from './types';
import { useFormData, useFormState, useTableMethods } from './form-hooks';

export default defineComponent({
  name: 'SchemaForm',
  components: {
    Form,
    [Form.Item.name]: Form.Item,
    Row,
    Col,
    Button,
    Space,
    SchemaFormItem,
  },
  props: SchemaFormProps,
  setup(props, { emit }) {
    const { schemas } = unref(props);
    const { formState } = useFormData({ props });

    const tableMethods = useTableMethods({ props, emit });

    const { formRef, onReset, onFinish } = tableMethods;

    const {
      getFormProps,
      getColProps,
      getActionColProps,
      getSchemas,
      getSchemaAction,
      getActionProps,
    } = useFormState({
      props,
      tableMethods,
      formState,
    });



    return {
      formState,
      getFormProps,
      getColProps,
      getActionColProps,
      getSchemas,
      getSchemaAction,
      getActionProps,
      formRef,
      onReset,
      onFinish,
    };
  },
});
</script>

<style lang="scss" scoped></style>

